<template>
  <div class="item"  :class="{
    error: state === 1 && isClear === 1,
    flashRed: state === 1 && isClear === 0,
    flashGreen: state !== 1 && isClear === 0,
  }" style="cursor: pointer;" @contextmenu.prevent.stop="checkState" :style="{height: setHei===true?`${height}px`:'auto'}">{{name}}</div>
</template>

<script>
import {submitOperateRecord} from "@/api/api";

export default {
  name: "GuangZiPai",
  props: {
    state: {
      type: Number
    },
      jianGeMing:{
        type: String,
        default: ''
      },
    name:{
      type:String
    },
      isClear:{
        type: Number,
      },
      info:{
        type: Object
      },
      height:{
        type: String
      },
      setHei:{
        type: Boolean,
          default: false
      }
  },
  components: {
  },
  methods: {

          checkState(){
              this.desc=this.$store.state.operDescData.find(item=>item.type==='jc'&&item.comType==='光字牌').desc;
              this.desc=this.desc.replace('jgName',this.info.jg_name).replace('devName',this.info.page_position+"："+this.info.state_desc).replace('state', (Number(this.state) === 0 ? "复归" : "动作"))
              submitOperateRecord( {log_desc:this.desc})
          },
		// 右击菜单
		itemRightClick(event, type,jianGeMing,info) {
			event.preventDefault(); // 阻止默认的右键菜单弹出
			// 显示自定义右键菜单
			const {clientX, clientY} = event
			let params = {
				clientX,
				clientY,
          jianGeMing,
          info,
				type,
				currentObj: {
					name: this.name,
					state: this.state,
					controlStatusList: [{value:0,label: '复归'},{value:1, label: '动作'}],
				}
			}
			this.$emit('itemRightClick', params)
		},
  },
    mounted() {

    }
}
</script>

<style scoped lang="less">
.item {
  background-color: #3BD201;
  color: #333333;
  padding: 8px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  &.error {
    background-color: #FA200D;
  }
}
.flashGreen {
  animation:rect001Animation 4s linear infinite;
}
@keyframes rect001Animation
{
  0% {background-color:rgb(59, 210, 1)}
  50% { background-color: #eee } /* 颜色变淡，但保持相同色调 */
  100% {background-color:rgb(59, 210, 1)}
}
.flashRed {
  animation:rect10Animation 4s linear infinite;
}
@keyframes rect10Animation
{
  0% {background-color:rgb(250, 32, 13)}
  50% { background-color: #eee } /* 颜色变淡，但保持相同色调 */
  100% {background-color:rgb(250, 32, 13)}
}
</style>
